<template>
	<view class="content" :style="{ paddingTop: totalheight}">
		<view :style="{ paddingTop: topheight,height:navheight,lineHeight:navheight }" class="nav">
			<view>{{tabIndex?'实名信息':'注册成功'}}</view>
		</view>
		<view v-if="tabIndex">
			<image src="@/static/img/real_img1.png" class="stateimg" mode="widthFix"></image>
			<view class="cent">
				<view class="c_title">身份信息</view>
				<view class="item">
					<image src="../../static/img/sign-info-01.png" mode="widthFix"></image>
					<p>昵称</p>
					<p>
						<input placeholder="请输入真实姓名" v-model="name" placeholder-class="input_p" />
					</p>
				</view>
				<view class="item">
					<image src="../../static/img/sign-info-03.png" mode="widthFix"></image>
					<p>身份证号</p>
					<p>
						<input placeholder="请输入身份证" v-model="idcard" placeholder-class="input_p" />
					</p>
				</view>
				<view class="default_btn btn" @click="verify">验证</view>
				<view class="hint" @click="next"><text>跳过</text>，以后设置</view>
			</view>
		</view>
		<view class="" v-else>
			<image src="@/static/img/real_img2.png" class="stateimg" mode="widthFix"></image>
			<image src="@/static/img/img_succeed.png" class="succeed_img" mode="widthFix"></image>
			<view class="hint2" @click="login">注册成功，<text>去登录</text></view>
		</view>
	</view>
</template>

<script>
	import {realName} from '@/common/js/index.js'
	export default {
		data() {
			return {
				topheight: uni.getStorageSync('topHeight'),
				totalheight: uni.getStorageSync('totalHeight'),
				navheight: uni.getStorageSync('navHeight'),
				tabIndex: true,
				name: "",
				idcard: '',
			}
		},
		onLoad() {},
		methods: {
			verify() {
				realName({
					real_name:this.name,
					idno_encrypt:this.idcard
				}).then(res=>{
					console.log(res);
					if(res.code==200) {
						this.tabIndex = false
					}else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			next() {
				this.tabIndex = false
			},
			login() {
				uni.reLaunch({
					url:'/pages/inlet/login'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		/* background: white; */
		overflow: hidden;
	}

	.nav {
		width: 100vw;
		position: relative;
		/* background-color: #F8F8F8; */
		background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 22;
	}

	.nav>view {
		text-align: center;
		font-size: 31rpx;
	}

	.stateimg {
		width: 694rpx;
		margin: 80rpx 28rpx;
	}

	.succeed_img {
		width: 460rpx;
		margin: 140rpx 144rpx 0;
	}

	.cent {
		position: relative;
		height: 50vh;
		margin: 0 30rpx 0;
		background-color: white;
		border-radius: 12rpx;
		z-index: 88;
		overflow: hidden;

		.c_title {
			font-weight: 500;
			font-size: 32rpx;
			margin: 40rpx 30rpx 10rpx;
		}

		.btn {
			margin-top: 140rpx;
		}

		.hint {
			font-size: 26rpx;
			margin-top: 30rpx;
			text-align: center;

			text {
				color: #FF524F;
			}
		}
	}

	.hint2 {
		margin-top: 42rpx;
		text-align: center;

		text {
			color: #FF524F;
		}
	}

	.item {
		height: 110rpx;
		/* margin: 0 30rpx; */
		margin: 0 30rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;

		image {
			width: 48rpx;
			margin-right: 20rpx;
		}

		p:nth-of-type(1) {
			font-size: 28rpx;
		}

		p:nth-of-type(2) {
			flex: 1;
			text-align: right;
		}

		input {
			font-size: 26rpx;
		}
	}
</style>